<!-- 分页封装组件，待完善 -->

<template>
    <el-pagination class="pull-right page-info" small background layout="total , sizes , prev, pager, next , jumper"
        @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="[10, 20, 50, 100]" :total="total" />
</template>

<script>
import { ref , watchEffect } from 'vue'



export default {
    props: {
        total: {
            type: [Number,String],
            default: 0
        }
    },
    setup(props, context) {

        // 总条数
        const total = ref(props.total)
        // 监听props.total发生变化时更新total
        watchEffect(() => {
            total.value = props.total
        })
        let sizechange = 'sizechange'
        let currentchange = 'currentchange'
        const handleSizeChange = (val) => {
              console.log(`${val} items per page`)
              context.emit('changeHandler' , sizechange , val)
        }
        const handleCurrentChange = (val) => {
              console.log(`current page: ${val}`)
              context.emit('changeHandler' , currentchange , val)
        }


        return {
            total,
            sizechange,
            currentchange,
            handleCurrentChange,
            handleSizeChange
        }
    }
}

</script>

<style lang="scss" scoped>
.page-info {
    margin-top: 20px;
    margin-bottom: 20px;
}
</style>